<template>
  <Form ref="formCom" class="xtx-form" v-slot="{ errors }" :validation-schema="schema">
    <h2>{{ unionId }}</h2>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <Field v-model="form.account" name="accountApi" class="input" type="text" placeholder="请输入用户名" />
      </div>
      <div class="error">{{ errors.accountApi }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <Field v-model="form.mobile" name="mobile" class="input" type="text" placeholder="请输入手机号" />
      </div>
      <div class="error">{{ errors.mobile }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <Field v-model="form.code" name="code" class="input" type="text" placeholder="请输入验证码" />
        <span @click="sendCodeBtn" class="code">{{ time === 0 ? '发送验证码' : `${time}秒`}}</span>
      </div>
      <div class="error">{{ errors.code }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field v-model="form.password" name="password" class="input" type="password" placeholder="请输入密码" />
      </div>
      <div class="error">{{ errors.password }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field name="rePassword"  class="input" type="password" placeholder="请确认密码" />
      </div>
      <div class="error">{{ errors.rePassword }}</div>
    </div>
    <a href="javascript:;" @click="submit" class="submit">立即提交</a>
  </Form>
</template>

<script>
import { Form, Field } from 'vee-validate'
import schema from '@/utils/vee-validate-schema'
import { reactive, watch } from 'vue'
import { userQQPatchCode, userQQPatchLogin } from '@/api/user'
import { useMsgCode, useQQLogin } from '@/hooks'

export default {
  name: 'CallbackPatch',
  components: { Form, Field },
  props: {
    unionId: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    // 完善信息注册所需的5个参数
    const form = reactive({
      // 通过 QQ 提供的API获取
      unionId: '',
      // 以下四个通过表单获取即可
      account: '',
      mobile: '',
      code: '',
      password: ''
    })

    // unionId 由父组件传递过来
    watch(() => props.unionId, (unionId) => {
      form.unionId = unionId
    }, { immediate: true })

    // 调用封装好的函数(hooks)
    const { time, sendCodeBtn } = useMsgCode(form, userQQPatchCode)
    const { submit, formCom } = useQQLogin(form, userQQPatchLogin)

    return { schema, form, time, sendCodeBtn, submit, formCom }
  }
}
</script>

<style scoped lang='less'>
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
